<template>
  <div class="shareList">
    <div class="title">
      <van-nav-bar title="面经分享">
        <template #left>
          <i
            class="iconfont iconbtn_nav_back iconStyle"
            @click="$router.push('/find')"
          ></i>
        </template>
      </van-nav-bar>
    </div>
    <div class="searchBox">
      <div class="search" @click="$router.push('/search')">
        <van-icon name="search" />请输入关键字
      </div>
    </div>
    <div class="share">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <share
          :item="item"
          :index="index"
          v-for="(item, index) in shareList"
          :key="index"
        ></share>
      </van-list>
    </div>
  </div>
</template>
<script>
import { getShare } from '@/api/find.js'
import share from '@/views/layout/find/share.vue'
export default {
  components: {
    share
  },
  props: ['item'],
  data () {
    return {
      loading: false,
      finished: false,
      shareList: [],
      start: 0,
      limit: 2
    }
  },
  created () {
    // 调用获取到面经分享数据的方法
    // this.getShareData()
  },
  methods: {
    // 数据处于加载中的方法
    async onLoad () {
      const res = await getShare({ start: this.start, limit: this.limit })
      //   console.log(res)
      //   保存数据

      this.shareList.push(...res.data.data.list)
      this.loading = false
      //   修改再次加载开始的下标
      this.start += this.limit
      //   判断当所添加的数组长度大于总数据数量时，加载完成，提示没数据了
      if (this.shareList.length >= res.data.data.total) {
        this.finished = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
.shareList {
  font-size: 12px;
  /deep/.van-nav-bar__title {
    font-size: 18px;
  }
  .title {
    .iconStyle {
      font-size: 44px;
    }
    /deep/.van-nav-bar__left {
      padding-left: 0;
    }
    // /deep/.van-nav-bar__title {
    //   font-weight: 700;
    // }
  }
  .searchBox {
    padding: 0 15px;
    height: 35px;
    margin-bottom: 15px;
    .search {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      background-color: #f7f4f5;
      height: 100%;
      border-radius: 20px;
      color: #ccc;
    }
  }
  /deep/.van-cell__title {
    width: 100%;
  }
}
</style>
